<template>
    <div class="home1">
        <!-- header头 -->
        <van-nav-bar title="标题"/>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
        </van-swipe>
        <!-- 轮播图 -->
        <van-grid square>
            <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
        </van-grid>
        <!-- list列表 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
            <van-card
                v-for="item in list" :key="item"
                num="2"
                price="2.00"
                desc="描述信息"
                title="商品标题"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                />
            <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        </van-list>
        </van-pull-refresh>

        <!-- footer -->
        <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o">标签</van-tabbar-item>
            <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
            <van-tabbar-item icon="friends-o" badge="5">标签</van-tabbar-item>
            <van-tabbar-item icon="setting-o" badge="20">标签</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import {Toast} from 'vant';
export default {
  data() {
    return {
      list: [],
      active:0,
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  methods: {
    //   上拉刷新
    onLoad() {
        // 显示loading
        Toast.loading({
            message: '加载中...',
            forbidClick: true,
            duration:0,
        });
        // 模拟异步请求
      setTimeout(() => {
        //   手动清除Toast
        Toast.clear();
        
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
        
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>
<style lang="scss" scoped>
.home1{
    .van-nav-bar{
        background:#69c3aa ;
    }
    .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
}
</style>